<!--招聘组员-分享二维码 -->
<template>
	<view class="qr-bigbox">
		<view class="qr-white">
			<view class="blue-ball ball1"></view>
			<view class="blue-ball ball2"></view>
			<view class="qr-white-box1">
				<view class="flex set-just">
					<view class="recu-title">{{ qrDetail.name }}</view>
					<view class="recu-money" :class="!qrDetail.status_name ? 'recu-money-cur' : null">{{ qrDetail.status_name || '关闭中' }}</view>
				</view>
				<view class="title-todo flex">
					<view class="set-mar publish-date">发布日期: {{ qrDetail.create_date }}</view>
				</view>
				<view class="flex num-box">
					<view class="text-center">
						<view class="content-sty">{{ qrDetail.end_date_num }}</view>
						<view class="title-sty">招聘人数</view>
					</view>
					<view class="text-center">
						<view class="content-sty">{{ qrDetail.sex_desc }}</view>
						<view class="title-sty">性别</view>
					</view>
					<view class="text-center">
						<view class="content-sty">{{ qrDetail.age_lower }} - {{ qrDetail.age_upper }}</view>
						<view class="title-sty">年龄要求</view>
					</view>
				</view>
				<view class="title-address flex">
					<view class="flex flex-1 set-wid rcs">
						<view class="set-mar">学历:</view>
						<view class="set-mar-con">{{ qrDetail.edu_name_str }}</view>
					</view>
					<view class="flex flex-1 set-wid rcs">
						<view class="set-mar">薪酬:</view>
						<view class="set-mar-con">{{ qrDetail.money_str }}</view>
					</view>
				</view>
				<view class="title-address flex rcs">
					<view class="set-mar">工作地点:</view>
					<view class="set-mar-con">{{ qrDetail.area_str }}</view>
				</view>
			</view>
			<view class="qr-white-box2">
				<view class="qrcode-imgbox">
					<image class="qrcode-img" :src="qr_code" mode="widthFix" />
					<!-- <tki-qrcode class="qrcode-img" ref="qrcode" cid="1" :val="qrDetail.show_img_link" size="288" onval="true" loadMake="true"
					 showLoading="false" usingComponents="true" /> -->
				</view>
				<view class="qrcode-title">扫码立即报名</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
			<view class="qr-bottom">
				<view class="qr-share">——— 分享 ———</view>
				<view class="qr-way">
					<view class="share-btn-item flex ccc" @tap="handleClickshareweixin">
						<view class="way-img"><img src="../../static/icon/weixin-2.png" alt="" /></view>
						<view class="img-title">微信</view>
					</view>
					<view class="share-btn-item flex ccc" @tap="handleClickShareWxQ">
						<view class="way-img"><img src="../../static/icon/pengyouquan-4.png" alt="" /></view>
						<view class="img-title">微信朋友圈</view>
					</view>
					<view class="share-btn-item flex ccc" @tap="handleClickShareQQ">
						<view class="way-img"><img src="../../static/icon/qq.png" alt="" /></view>
						<view class="img-title">QQ</view>
					</view>
				</view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
// import jweixin from 'jweixin-module';
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			qr_code: '',
			qrDetail: {}
		};
	},
	async onLoad(option) {
		if (option.items) {
			let detail = JSON.parse(decodeURIComponent(option.items));
			this.qrDetail = detail;
			let url = this.ServicesApi.getQrCodeImg;
			let data = {
				id: detail.id
			};
			let result = await this.Services.post(url, data);
			if (result.code == this.StatusCode.SUCCESS_CODE) {
				this.qr_code = result.data;
			}
			// #ifdef H5
			this.initialWeChatSdk(detail);
			// #endif
		}
	},
	methods: {
		async initialWeChatSdk(detail) {
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/micromessenger/i) == 'micromessenger') {
				console.log('微信客户端---->', 'true');
				let url = this.ServicesApi.get_share_config; // 'http://rencaiku.renkeyun.cn/wechat/index/share?tenant_id=&id=0'
				let data = {
					url: 'http://rencaiku.renkeyun.cn/h5', // encodeURIComponent(window.location.href.split('#')[0]), //获取当前url然后传递给后台获取授权和签名信息
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE || result.code == 20000) {
					console.log('result.data---->', result.data);
					//返回需要的参数appId,timestamp,noncestr,signature等  
					//注入config权限配置  
					// jweixin.config({
					// 	debug: false,
					// 	appId: result.data.appId,
					// 	timestamp: result.data.timestamp,
					// 	nonceStr: result.data.nonceStr,
					// 	signature: result.data.signature,
					// 	jsApiList: [ //这里是需要用到的接口名称
					// 		'updateAppMessageShareData',
					// 		'updateTimelineShareData'
					// 	]
					// });
					wx.ready(function() {
						//分享给朋友
						wx.updateAppMessageShareData({
							title: detail.name,
							desc: detail.remark,
							link: detail.show_img_link,
							imgUrl: detail.share_logo,
							success: function(res) {
								console.log('res---->', res);
							}
						});
						//分享到朋友圈
						wx.updateTimelineShareData({
							title: detail.name,
							link: detail.show_img_link,
							imgUrl: detail.share_logo,
							desc: detail.remark,
							success: function(res) {
								console.log('res---->', res);
							}
						});
					});
				}
			}
		},
		handleClickshareweixin() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: this.qrDetail.show_img_link,
				title: this.qrDetail.name,
				summary: this.qrDetail.remark,
				imageUrl: this.Images.ser_img_logo,
				success: function(res) {},
				fail: function(err) {
					// console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		handleClickShareWxQ() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSenceTimeline',
				type: 0,
				href: this.qrDetail.show_img_link,
				title: this.qrDetail.name,
				summary: this.qrDetail.remark,
				imageUrl: this.Images.ser_img_logo,
				success: function(res) {
					// console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					// console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		handleClickShareQQ() {
			uni.share({
				provider: 'qq',
				scene: '',
				type: 3,
				href: this.qrDetail.show_img_link,
				mediaUrl: this.qrDetail.show_img_link,
				title: this.qrDetail.name,
				summary: this.qrDetail.remark,
				imageUrl: this.Images.ser_img_logo,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					// console.log("fail:" + JSON.stringify(err));
				}
			});
		}
	}
};
</script>

<style scoped lang="stylus">
.qr-bigbox
	overflow hidden
	min-height 100vh
	background linear-gradient(360deg, rgba(74, 144, 226, 1) 0%, rgba(0, 102, 220, 1) 100%)
	.qr-white
		margin 40rpx
		padding 40rpx
		background #fff
		.blue-ball
			height 46upx
			width 46upx
			background #3f77d7
			border-radius 50%
			top 500rpx
			position absolute
		.ball1
			left 15upx
		.ball2
			right 15upx
		.qr-white-box1
			height 440rpx
			.num-box
				justify-content space-around
				align-items center
				height 160upx
				background linear-gradient(270deg, rgba(250, 250, 250, 1) 0%, rgba(243, 243, 243, 1) 100%)
				.text-center
					text-align center
					.title-sty
						font-size 28upx
						color #666666
					.content-sty
						font-size 30upx
						color #333333
						margin-bottom 20upx
			.set-just
				justify-content space-between
			.recu-title
				font-size 36upx
				font-weight 500
				color #333
			.recu-money
				height 34upx
				width 96upx
				border 1upx solid #5BBD00
				line-height 34upx
				text-align center
				font-size 22upx
				color #5BBD00
			.recu-money-cur
				color #f00
				border-color #f00
			.title-todo
				color #666666
				margin 16rpx 0
				font-size 28upx
				.publish-date
					color #999999
					font-size 24rpx
			.set-mar
				color #999999
				font-size 28rpx
				margin-right 10rpx
				.set-mar-con
					font-size 28rpx
					color #333333
			.title-frame
				height 40upx
				padding 0 12upx
				background #F3F3F3
				color #999999
				font-size 26upx
				margin-right 20upx
				line-height 40upx
			.title-address
				color #666
				margin-top 20rpx
				.set-wid
					// width: 45%;
			.result-box
				margin-top 20upx
				.title-res
					// margin-top:20upx;
					font-size 28upx
					color #666
					// width:142upx;
				.title-first
					margin-left 4upx
					// margin-top:16upx;
					color #333333
					font-size 28upx
		.qr-white-box2
			// height: 460upx;
			border-top 1upx dashed #979797
			margin 0 45upx
			padding-top 40rpx
			.qrcode-imgbox
				height 288upx
				width 288upx
				margin 0 auto
			.qrcode-img
				height 288upx
				width 288upx
				// background:red;
			.qrcode-title
				margin 0 auto
				height 60upx
				width 320upx
				background #4179d7
				font-size 32rpx
				color #fff
				line-height 60upx
				text-align center
				border-radius 30upx
				margin-top 24upx
	.qr-bottom
		padding-bottom 100rpx
		.qr-share
			text-align center
			font-size 30upx
			color #fff
			margin 40rpx 0
		.qr-way
			display flex
			justify-content space-around
			.share-btn-item
				flex 1
			.img-title
				color #FFFFFF
				font-size 28rpx
			.way-img
				height 44upx
				width 44upx
				text-align center
				margin 10upx auto
				img
					height 44upx
					width 44upx
</style>
